<template>
    <template v-if="item.children">
       <span class="m-title" @click="getLaunch(item.field)">
           <my-icon :style="[!launchId.contains(item.field)?'transform: rotate(90deg)':'']" class="m-icon" size="0.9rem" type="icon-jiantou_liebiaoxiangyou"></my-icon>{{ $i18(item.title) }}</span>
        <template class="m-itemChild" :style="[!launchId.contains(item.field)?'':'display: none']">
            <div v-for="itemChild in item.children" style="width: 100%">
                <MSubTableName :item="itemChild" :row="row" :typeName="typeName+1"></MSubTableName>
            </div>
        </template>
    </template>
    <template v-else-if="subShowControl(item) && showControl(item.controlConfig,row)" class="m-children">
        <MFormTitle v-if="item.controlConfig.control.showTitle"
                    :name="item.controlConfig.name"
                    :metadata="item.controlConfig"
                    :style="geStyle()"
                    :readOnly="curReadOnly(item.controlConfig,row)"
                    :required="curRequired(item.controlConfig,row)"
                    :rules="item.controlConfig.rules"></MFormTitle>
        <div class="x-help-describe" v-if="item.controlConfig.control.describe && !item.controlConfig.control.describePosition " v-html="item.controlConfig.control.describe"></div>
        <m-component
            style="margin-top: 0.5rem"
            v-model="row[item.controlConfig.field]"
            :data="row"
            :metadata="item.controlConfig"
            :readOnly="curReadOnly(item.controlConfig,row)"
        ></m-component>
        <div class="x-help-describe-bottom" v-if="item.controlConfig.control && item.controlConfig.control.describe && item.controlConfig.control.describePosition" v-html="item.controlConfig.control.describe"></div>
    </template>
</template>

<script>
import SubTable from "./SubTable.js"
import { Function } from "eval5";
export default {
    name: "MSubTableName",
    props:{
        item:{
            type:Object,
            default: () => {}
        },
        row:{
            type:Object,
            default: () => {}
        },
        typeName:{
            type:String,
            default:""
        },
        readOnly:''
    },
    mixins: [SubTable],
    data(){
        return{
            globalConfig: {},
            launchId:[]
        }
    },
    created(){
        this.globalConfig =  uni.getStorageSync('globalConfig') ;
    },
    methods:{
        subShowControl(item){
            let conditionConfig = item.colHideConfig;
            if (!conditionConfig) {
                return true;
            }
            if(conditionConfig.isHide){
                return false
            }
            if(!conditionConfig.hideCondition){
                return true;
            }
            let {hideCondition} = conditionConfig;
            if (hideCondition.indexOf('return') === -1) {
                hideCondition = 'return ' + hideCondition;
            }
            let fn = new Function('row',hideCondition);
            return  !fn.call(this.formVm)
        },
        geStyle(){
            let style={}
            if(this.globalConfig.layout=='horizontal'){
                style = {
                    textAlign:this.globalConfig.align,
                    width:this.globalConfig.labelWidth,
                    margin:'0.5rem 0.5rem 0rem 0.5rem',
                }
            }
            return style
        },
        getLaunch(id){
            if(this.typeName=='SubTable'){
                return
            }
            if(this.launchId.contains(id)){
                this.launchId.forEach((res,index)=>{
                    if(res==id){
                        this.launchId.splice(index,1)
                    }
                })
            }else {
                this.launchId.push(id)
            }
        }
    }
}
</script>

<style scoped>
.m-itemChild{
    border: 1px solid #d9d9d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.m-icon{
    display: none;
}
.m-title{
    display: flex;
    align-items: center;
}
.m-itemChild >>>.m-icon{
    display: block;
    margin:0rem 0.2rem;
}
</style>
